import React, { useState, useCallback, useEffect } from 'react'
import { connect } from 'react-redux'
import '../../assets/styles/pages/orderManager.scss'
import QueryCondition from '../../components/order/orderManager/QueryCondition'
import OrderTable from '../../components/order/orderManager/OrderTable'
import moment from 'moment'
import 'moment/locale/zh-cn'
import { showLoad, hideLoad } from '../../utils/globalLoading.js'
import { errModal } from '../../utils/globalModal'
import { getOrdersAPI } from '../../apis/order'
// import { Divider } from 'antd'

const OrderManager = (props) => {
  const {pageState} = props
  const [query, setQuery] = useState({
    keyword: '',
    vendorID: -1,
    storeIDs: [],
    toDate: moment(new Date(), 'YYYY-MM-DD'),
    fromDate: moment(new Date(Date.now() - 1 * 24 * 3600 * 1000), 'YYYY-MM-DD'),
    isDateFinish: false,
    statuss: [2,5,10,15,17,18,20,22,110,115],
    offset: 0,
    pageSize: 50
  })
  const [order, setOrder] = useState({
    list: [],
    totalCount: 0
  })

  useEffect(() => {
    searchOrder()
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [query.offset, query.pageSize])

  const searchOrder = async () => {
    try {
      showLoad()
      const formQuery = JSON.parse(JSON.stringify(query))
      formQuery.fromDate = moment(formQuery.fromDate).format('YYYY-MM-DD')
      formQuery.toDate = moment(formQuery.toDate).format('YYYY-MM-DD')
      if (!formQuery.keyword) delete formQuery.keyword
      if (formQuery.vendorID !== -1) formQuery.vendorIDs = [formQuery.vendorID]
      delete formQuery.vendorID
      if (formQuery.storeIDs.length === 0) delete formQuery.storeIDs

      const {totalCount, orders} = await getOrdersAPI(formQuery)
      console.log(totalCount, orders)
      setOrder({
        list: orders || [],
        totalCount
      })
    } catch (e) {
      errModal(e)
    } finally {
      hideLoad()
    }
  }

  const confirmQuery = async () => {
    if (query.offset === 0) {
      setQuery({
        ...query,
        offset: 0
      })
      searchOrder()
    } else {
      setQuery({
        ...query,
        offset: 0
      })
    }
  }

  const onFieldsChange = (formQuery) => {
    setQuery({
      ...query,
      ...formQuery
    })
  }

  const onPageChange = (page, pageSize) => {
    setQuery({
      ...query,
      offset: (page - 1) * pageSize
    })
  }

  const onShowSizeChange = (cur, size) => {
    setQuery({
      ...query,
      offset: 0,
      pageSize: size
    })
  }

  return (
    <div className="order-manager">
      <div className="order-query">
        <QueryCondition
          query={query}
          onFinish={confirmQuery}
          orderStatus={pageState.cms.orderStatus}
          onFieldsChange={onFieldsChange}
        ></QueryCondition>
      </div>
      <div className="order-table">
        <OrderTable
          dataSource={order.list}
          pageSize={query.pageSize}
          total={order.totalCount}
          offset={query.offset}
          onPageChange={onPageChange}
          onShowSizeChange={onShowSizeChange}
        ></OrderTable>
      </div>
      {/* <div className="order-page">
        <Page></Page>
      </div> */}
    </div>
  )
}

const stateToProps = (state, props) => ({
  ...props,
  ...state
})

const actionToProps = {}

export default connect(stateToProps, actionToProps)(OrderManager)
